<template>
  <div class="chart-wrapper" ref="Incoming"></div>
</template>

<script>
import echarts from "echarts";
import { onMounted, onBeforeUnmount, ref, watch } from "vue";
import { debounce } from "@/utils/index.js";
import useResize from "@/componentApi/useResize.js";
import { selectOtherData } from "@/api/mockChart";

export default {
  name: "Incoming",
  setup() {
    let { abcode, year, parentInfo, routerChange } = useResize();

    const Incoming = ref(null);
    let myChart = ref(null);

    const resizeHandler = debounce(() => {
      if (myChart) {
        myChart.resize();
      }
    }, 200);

    onMounted(() => {
      getChartData();
      window.addEventListener("resize", resizeHandler);
    });
    onBeforeUnmount(() => {
      window.removeEventListener("resize", resizeHandler);
    });

    //模拟接口，获取echarts数据
    const getChartData = async () => {
      const { data } = await selectOtherData({
        abcode,
        year,
      });
      initEcharts(data);
    };

    //渲染echarts图
    const initEcharts = (data) => {
      myChart = echarts.init(Incoming.value);
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          data: ["月度进件统计(笔)", "月度放款统计(元)"],
          textStyle: {
            //图例文字的样式
            color: "#fff",
          },
        },
        grid: {
          left: 50,
        },
        toolbox: {
          show: true,
        },
        xAxis: {
          type: "value",
          axisLabel: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        yAxis: {
          type: "category",
          inverse: true, //正序
          data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
          // splitNumber:50,
          axisLabel: {
            margin: 10,
            textStyle: {
              color: "#fff",
            },
          },
        },
        series: [
          {
            name: "月度进件统计(笔)",
            type: "bar",
            label: {
              show: true,
              itemStyle: {
                color: "#fff",
              },
              position: "right",
            },
            data: [165, 170, 180, 14, 110, 150, 162, 180, 145, 168, 161, 12.5],
            itemStyle: {
              normal: {
                color: "rgba(1, 121, 254, 1)", //折线点的颜色
              },
            },
          },
          {
            name: "月度放款统计(元)",
            type: "bar",
            label: {
              show: true,
              itemStyle: {
                color: "#fff",
              },
              position: "right",
            },
            data: [150, 105, 190, 165, 170, 180, 14, 110, 150, 162, 180, 145],
            itemStyle: {
              normal: {
                color: "rgba(1, 228, 255, 1)", //折线点的颜色
              },
            },
          },
        ],
      };
      myChart.setOption(option, true);
    };

    watch();
    watch();

    return {
      Incoming,
    };
  },
};
</script>
